POC: theme icons map #551
POC: theme icons map #551
Conversation
Oksydan
commented
Sep 28, 2023
•
Oksydan
commented
| Questions | Answers |
|---|---|
| Description? | Simple POC replacing plain icon fonts with icons map and simple renderIcon smarty function. It should allow developers to adjust their icons in themes and allow module developers to use icons w/o being aware of what icons are being used by theme. Icons map should be standardized in some way 🥶 |
| Type? | POC |
| BC breaks? | no |
| Deprecations? | no |
| Fixed ticket? | https://github.com/PrestaShop/hummingbird/discussions/549 |
| Sponsor company | Waynet |
| How to test? | N/A |
| {if $iconName && !empty($iconsMap[$iconName])} | ||
|
|
||
| <span | ||
| class="material-icons {if !empty($extraAttributes['class'])}{$extraAttributes['class']}{/if}" |
There was a problem hiding this comment.
Here we have material-icons hardcoded so what would happen if someone wanted to use another icon lib? They override this smarty template?
There was a problem hiding this comment.
@matks thank you for your response.
Tbh modules aren't aware what icon fonts theme use. It's theme responsibility do display proper icon to given icon key. If you would like to change icon fonts to for example font-awsome, all you have to do is changing material icons to fa and map keys to your new icon-fonts.
Instead of:
{assign
var=iconsMap
value=[
"cart" => "shopping_cart"
]
scope="global"
}for example:
{assign
var=iconsMap
value=[
"cart" => "fa-shopping-cart" // not sure it's valid icon class
]
scope="global"
}
|
Looks like svgs are defined in 2 places: icons-sprite.svg and helpers.tpl partial. I'm not sure this is a good idea. There should be 1 source for the icon. Also why don't you let the SVG be compiled and minified? IMO /assets should contain only compiled resources. |
|
Hi @SharakPL |
|
Thank you, @Oksydan. I think this proof of concept is a good idea. 👍 From my point of view, I'm not sure that using an icon map is a good idea. If we want to standardize this, we should not test if the For the SVG sprite, the idea is very interesting. This would make the use of SVG sprites much easier. Finally, I want to point out a problem with this POC that I think can't be solved within the theme. In your example, you change the |
